<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"> 
        {{message}}
        {{name}}
        <h1>欢迎使用vue</h1>
        <p>{{10+20}}</p>
    </div>

   
    <!-- 压缩版省去了很多的开发提示，和数据的检验 建议刚开始用不压缩版 -->
    <script src="../lib/vue.js"></script>
    <script>
        // $() 工厂函数
        // vue()//构造函数，需要使用new 关键字来实例化
        // vm=>viewmodel 视图模型
      let vm= new Vue({
          el:"#app",//element 指定vue的视图模型渲染的挂载元素(vue渲染之后元素的插入位置)
          data:{
              message:'Hello Vue!',
              name:'张三'
          },
          methods:{},
          template:`<div><h1>欢迎使用vue</h1>
        <p>{{10+20}}</p></div>`,
        //vue的视图模块（HTML布局结构模板），如果没有指定template，那么vue会默认吧el指定元素中的内容当做是模板

       
      }); //实例化函数

    </script>
</body>
</html>